<template>
	<view class="ai-assistant" @tap="openAIChat" :class="{ 'pulse': isPulsing }">
		<view class="assistant-icon">
			<uni-icons type="chat" size="24" color="#fff"></uni-icons>
		</view>
		<view class="assistant-ripple" v-if="showRipple"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isPulsing: false,
			showRipple: false,
			pulseTimer: null,
			rippleTimer: null
		}
	},
	methods: {
		// 打开AI聊天
		openAIChat() {
			// 添加点击动画效果
			this.showRipple = true;
			this.rippleTimer = setTimeout(() => {
				this.showRipple = false;
			}, 600);

			// 跳转到AI聊天页面
			uni.navigateTo({
				url: '/pages/ai-chat/ai-chat'
			});
		},

		// 开始脉冲动画
		startPulse() {
			this.isPulsing = true;
			this.pulseTimer = setTimeout(() => {
				this.isPulsing = false;
			}, 2000);
		}
	},
	
	onLoad() {
		// 页面加载时开始脉冲动画提醒用户
		setTimeout(() => {
			this.startPulse();
		}, 3000);
	},

	onUnload() {
		// 清理定时器
		if (this.pulseTimer) {
			clearTimeout(this.pulseTimer);
		}
		if (this.rippleTimer) {
			clearTimeout(this.rippleTimer);
		}
	}
}
</script>

<style scoped>
	.ai-assistant {
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
		z-index: 9999;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow: hidden;
	}

	.ai-assistant:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
	}

	.ai-assistant.pulse {
		animation: pulse 2s infinite;
	}

	.assistant-icon {
		position: relative;
		z-index: 2;
	}

	.assistant-ripple {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20rpx;
		height: 20rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: ripple 0.6s ease-out;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
		}
		50% {
			transform: scale(1.05);
			box-shadow: 0 12rpx 48rpx rgba(102, 126, 234, 0.6);
		}
		100% {
			transform: scale(1);
			box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
		}
	}

	@keyframes ripple {
		0% {
			width: 20rpx;
			height: 20rpx;
			opacity: 1;
		}
		100% {
			width: 200rpx;
			height: 200rpx;
			opacity: 0;
		}
	}

	/* 夜间模式适配 */
	.night-mode .ai-assistant {
		background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
		box-shadow: 0 8rpx 32rpx rgba(44, 62, 80, 0.4);
	}

	.night-mode .ai-assistant:active {
		box-shadow: 0 4rpx 16rpx rgba(44, 62, 80, 0.3);
	}

	.night-mode .ai-assistant.pulse {
		animation: pulse-night 2s infinite;
	}

	@keyframes pulse-night {
		0% {
			transform: scale(1);
			box-shadow: 0 8rpx 32rpx rgba(44, 62, 80, 0.4);
		}
		50% {
			transform: scale(1.05);
			box-shadow: 0 12rpx 48rpx rgba(44, 62, 80, 0.6);
		}
		100% {
			transform: scale(1);
			box-shadow: 0 8rpx 32rpx rgba(44, 62, 80, 0.4);
		}
	}
</style>